import React, { Component } from 'react'
import { TabBar } from 'antd-mobile';
import {withRouter} from "react-router-dom"
class TabBarExample extends Component {
    constructor(props) {
      super(props);
      this.state = {
        selectedTab: 'home',
        hidden: false,
        fullScreen: true,
      };
    }
  
    render() {
      return (
        <div style={this.state.fullScreen ? { position: 'fixed', height: '100%', width: '100%', top: 0 } : { height: 400 }}>
          <TabBar
            unselectedTintColor="#4c4c4c"
            tintColor="#fe2d48"
            barTintColor="white"
            hidden={this.state.hidden}
          >
            <TabBar.Item
              title="首页"
              key="Life"
              icon={<i className='iconfont icon-faxian-copy'></i>}
              selectedIcon={<i className='iconfont icon-faxian-copy'></i>}
              selected={this.props.location.pathname==='/'}
              onPress={() => {this.props.history.push("/");}}
            >
              {this.props.children}
            </TabBar.Item>
            <TabBar.Item
               icon={<i className='iconfont icon-leimupinleifenleileibie'></i>}
               selectedIcon={<i className='iconfont icon-leimupinleifenleileibie'></i>}
              title="分类"
              key="category"
              selected={this.props.location.pathname==='/category'}
              onPress={() => {this.props.history.push("/category");}}
            >
             {this.props.children}
            </TabBar.Item>
            <TabBar.Item
              icon={<i className='iconfont icon-gouwuche1'></i>}
              selectedIcon={<i className='iconfont icon-gouwuche1'></i>}
              title="购物车"
              key="cart"
              selected={this.props.location.pathname==='/cart'}
              onPress={() => {this.props.history.push("/cart");}}
            >
              {this.props.children}
            </TabBar.Item>
            <TabBar.Item
              icon={<i className='iconfont icon-wode'></i>}
              selectedIcon={<i className='iconfont icon-wode'></i>}
              title="我的"
              key="my"
              selected={this.props.location.pathname==='/my'}
              onPress={() => {this.props.history.push("/my");}}
            >
              {this.props.children}
            </TabBar.Item>
          </TabBar>
        </div>
      );
    }
}

export default withRouter(TabBarExample)